<template>
	<view class="page-contanier">
		<!--公共页头: 搜索栏 -->
		<view class="head-container">
			<page-head mode="black" url="/components/page-head/page-head"></page-head>
		</view>
		<!-- 主体内容 -->
		<view class="content-container">
			<custom-scroll-view :loadData="handleLoadData" :refresherLoad="isRefresherLoad"
				refresherBackground="#3FD3D1" ref="listRef" @scroll='handleScroll' emptyText="暂无商品">
				<!-- 要显示的内容，传入给custom-scroll-view的data插槽 -->
				<template v-slot="{data}">
					<view>
						<!-- 圆弧 -->
						<view class="arc-container"></view>
						<!-- 轮播图 -->
						<view class="swiper-container" v-if="carouselFigureList.length>0">
							<swiper circular indicator-dots indicator-active-color="#3FD3D1" indicator-color="#f0f0f0"
								class='swiper-view' autoplay>
								<swiper-item v-for="item in carouselFigureList" :key="item.id">
									<image class="image-container" :src='item.img' lazy-load
										@click="toUsedBannerDetail(item)" mode="widthFix">
									</image>
								</swiper-item>
							</swiper>
						</view>
						<!-- 商品分类 -->
						<view class="classify-container">
							<view class="classify-container">
								<view class="used-classify">
									<view class="user-classify-item" v-for="item in usedClassifyList"
										:key='item.familyId' @click="toUsedClassifySearch(item)">
										<uni-icons class="right-icon" custom-prefix="iconfont" :type="item.iconType"
											color="#3FD3D1" size="50rpx"></uni-icons>
										<text>{{item.familyName}}</text>
									</view>
								</view>
							</view>
						</view>
						<!-- 热门推荐标题 -->
						<view class="used-recommend-container">
							<text style="font-weight: bold;">热门推荐</text>
							<view class="sort-options">
								<text class="sort-item active">综合</text>
								<text class="sort-item">最新</text>
								<text class="sort-item">最热</text>
							</view>
						</view>
						<!-- 热门推荐的二手商品列表 -->
						<view class="waterfalls-flow-container">
							<custom-waterfalls-flow :value="data.data" ref="waterfallsFlowRef" :column="2"
								imageKey="cover" :listStyle="{
						                marginBottom:'32rpx',
						                boxShadow: '0px 0px 2px 0px rgba(0, 0, 0, 0.1)',
						                boxSizing:'border-box'
						              }" imgMaxHeight="400px" @wapperClick="handleItemClick" @imageClick="handleItemClick">
								<!-- #ifdef MP-WEIXIN -->
								<view class="info-container" v-for="(item,index) in data.data" :key="index"
									slot="slot{{index}}">
									<text class="title">{{item.goodsName}}</text>
									<view class="item-info">
										<image v-if="item.avatar" :src="item.avatar" mode="aspectFill"></image>
										<text class="user-info-name">{{item.userName}}</text>
										<text class="user-info-price">￥{{item.goodsPrice}}</text>
									</view>
								</view>
								<!-- #endif -->
								<!-- #ifndef MP-WEIXIN -->
								<template v-slot:default="item">
									<view class="info-container">
										<text class="title">{{item.goodsName}}</text>
										<view class="item-info">
											<image v-if="item.avatar" :src="item.avatar" mode="aspectFill"></image>
											<text class="user-info-name">{{item.userName}}</text>
											<text class="user-info-price">￥{{item.goodsPrice}}</text>
										</view>
									</view>
								</template>
								<!-- #endif -->
							</custom-waterfalls-flow>
						</view>
					</view>
				</template>
			</custom-scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		carouselFigureApi,
		getUsedClassifyApi,
		getSearchIntactGoodsApi
	} from '@/api/used/used.js'

	export default {
		data() {
			return {
				carouselFigureList: [],
				usedClassifyList: [],
				navListActive: 0, // 分类列表
				isRefresherLoad: false,
				navList: [{
						text: "最新",
					},
					{
						text: "最热",
					}
				],
				isBackUp: false, // 是否返回顶部
			}
		},
		onLoad() {
			this.handleCarouselFigureList();
			this.handleGetUsedClassifyList();
		},
		methods: {
			//获取二手页面分类标题
			async handleGetUsedClassifyList() {
				const {
					data: res
				} = await getUsedClassifyApi()
				if (!res.success) {
					return
				}
				this.usedClassifyList = res.data.list.reverse()
			},
			async handleCarouselFigureList() {
				const {
					data: res
				} = await carouselFigureApi();
				if (!res.success) {
					return;
				}
				this.carouselFigureList = res.data.list
				console.log("carousel length:" + this.carouselFigureList.length)
			},
			//加载数据
			async handleLoadData(page) {
				page == 1 && this.$refs.waterfallsFlowRef.refresh()
				this.handleCarouselFigureList();
				let sort = this.navListActive;
				let familyId = 0;

				let {
					data: res
				} = await getSearchIntactGoodsApi(page, familyId, sort);
				let records = res.success ? res.data.records : [];
				let pages = res.success ? res.data.pages : 0;
				records = records.map((item) => {
					const imgArr = item.goodsImage.split(';');
					item.cover = imgArr ? imgArr[0] : '';
					return item;
				})
				console.log(records);
				return {
					success: res.success,
					data: records,
					pages: pages
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.page-contanier {
		background-color: #fff;

		.head-container {
			position: relative;
			z-index: 999;
			width: 100%;
			background: #3FD3D1;
			overflow: hidden;
		}

		.content-container {
			width: 100%;
			height: calc(100vh - var(--window-bottom) - 200rpx);

			.arc-container {
				width: 100%;
				height: 80rpx;
				background: #3FD3D1;
				border-radius: 0rpx 0rpx 50% 50%;
			}

			.swiper-container {
				padding: 0px 16px 0 16px;

				.swiper-view {
					margin-top: -45rpx;
					margin-bottom: 38rpx;
					height: 220rpx;
					width: 100%;

					.image-container {
						height: 100%;
						width: 100%;
						border-radius: 16rpx;
					}
				}
			}

			.classify-container {
				padding: 0px 16px 0 16px;

				.used-classify {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.user-classify-item {
						height: 100%;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						image {
							width: 100rpx;
							height: 100rpx;
						}

						text {
							font-size: 24rpx;
						}
					}
				}

			}


			.used-recommend-container {
				position: sticky;
				top: 0;
				left: 0;
				z-index: 9999;
				background-color: #fff;
				padding: 24rpx 16px 24rpx 16px;
				display: flex;
				justify-content: space-between;
				/* 使内部元素左右分布 */
				align-items: center;
			}

			.sort-options {
				display: flex;
			}

			.sort-item {
				margin-left: 20rpx;
				color: #808080;
				font-weight: bold;
			}

			.active {
				color: #00bfff;
			}

			.waterfalls-flow-container {
				padding: 32rpx;
				box-sizing: border-box;

				// max-height: 400rpx !important;

				.waterfalls-flow {
					padding: 0 4rpx;
				}

				.info-container {
					padding: 16rpx;
					box-sizing: border-box;

					.title {
						display: inline-block;
						width: 100%;
						overflow: hidden;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.item-info {
						margin-top: 20rpx;
						display: flex;
						align-items: center;

						image {
							width: 48rpx;
							height: 48rpx;
							border-radius: 48rpx;
							flex-shrink: 0;
						}

						.user-info-name {
							font-size: 24rpx;
							font-weight: 350;
							color: #666666;
							margin-left: 16rpx;
							display: inline-block;
							width: 100%;
							overflow: hidden;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.user-info-price {
							flex-shrink: 0;
							font-size: 32rpx;
							font-weight: 700;
							color: #FF756A;
							text-align: right;
						}
					}

				}

			}
		}
	}
</style>